<template>
	<view>
		<view class="title">
			<view class="box">
				<image @click="clickBack" class="backIcon" src="../static/backBlack.png"></image>
				<view class="text">开台</view>
			</view>
		</view>
		<view class="container">
			<view class="topCard" :class="{heightCard:unfoldBoolean}">
				<view class="top">
					<view class="text1">1号桌</view>
					<view class="text2">空闲中</view>
				</view>
				<view class="mid">
					<image class="image" src="../static/Frame.png" mode=""></image>
					<view class="text">黑游台球-济宁万达广场</view>
				</view>
				<view class="groundText" v-if="data.order_message.length > 0">
					有人数据了
				</view>
				<view v-else class="groundText">今日暂无预约</view>
				<view class="unfoldButton" @click="click_unfold">
					<image class="image" :class="{trueImage:unfoldBoolean}" src="../static/unfold.png"></image>
				</view>
			</view>
			<view class="buttonBox">
				<!-- @click="clcick_select_order(item.title)" -->
				<view class="button1" @click="click_orders" v-for="item in buttonData">
					<image class="image" :src="item.image" mode=""></image>
					<view class="titleText">{{item.title}}</view>
					<view class="text">{{item.text}}</view>
				</view>
			</view>
		</view>
		<image class="background" src="../static/background.png"></image>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	let {
		proxy
	} = getCurrentInstance()
	let data = reactive({
		options: {},
		order_message: [],
		userIfon: null,
		binding_message: []
	})
	const buttonData = ref([{
			title: '立即开台',
			text: '默认就近，小时开台',
			image: '../static/立即开台.png'
		},
		{
			title: '预约开台',
			text: '默认预约5分钟后开台',
			image: '../static/预约开台.png'
		},
		{
			title: '验券开台',
			text: '验券后立即/预约开台',
			image: '../static/验券开台.png'
		}, {
			title: '敬请期待',
			text: '更多开台方式即将上线',
			image: '../static/敬请期待.png'
		},
	])
	const clickBack = () => {
		console.log("back")
		uni.navigateBack({
			delta: 1
		})

	}
	const unfoldBoolean = ref(false)
	const click_unfold = () => {
		unfoldBoolean.value = !unfoldBoolean.value
	}

	const clcick_select_order = (item) => {
		console.log(item)
		if (item == '立即开台' || item == '预约开台') {
			console.log('to_select_order')
			uni.navigateTo({
				url: `../select_order/select_order?id=${item}`
			});
		}
	}

	function getReservation(item) { //预约跳转
		proxy.$https('/get_binding_message_api', {
			store_id: data.options.store_id,
			binding_id: data.options.binding_id
		}).then(res => {
			data.order_message = res.order_message
			data.binding_message = res.binding_message[0]
			console.log(data.binding_message[0], 'data.order_message ')
			// data.deviceList = res;

		})
	}
	const click_orders = () => {
		let flag = data.order_message.length === 0 ? false : data.order_message.every(item => item.order_status == 3);
		console.log(flag, 'order_message', data.order_message)
		if (flag) {
			uni.showToast({
				title: "当前已有订单",
				icon: 'error'
			})
			return
		}
		// console.log(allTime.value.BandE)
		proxy.$https("/immediately_begin_api", {
			user_id: data.userIfon.user_id, //用户id
			user_name: data.userIfon.user_name, //用户名
			user_phone: data.userIfon.phone, //用户电话
			user_avatar: data.userIfon.avatar, //用户头像
			store_id: data.options.store_id, //商家id
			store_name: data.options.store_name,
			store_phone: data.options.boss_phone,
			store_avatar: data.options.store_avatar,
			province: data.options.province,
			city: data.options.city,
			district: data.options.district,
			binding_id: data.binding_message.binding_id,
			zf_mode: 2
		}).then(res => {
			uni.showToast({
				title: '下单成功',
				icon: "success"
			})
		})
		// proxy.$https('/reservation_generate_api', { //预约单生成
		// 	user_id: data.userIfon.user_id, //用户id
		// 	user_name: data.userIfon.user_name, //用户名
		// 	user_phone: data.userIfon.phone, //用户电话
		// 	user_avatar: data.userIfon.avatar, //用户头像
		// 	store_id: data.dom.store_id, //商家id
		// 	store_name: data.storeDom.store_name,
		// 	store_phone: data.storeDom.boss_phone,
		// 	store_avatar: data.storeDom.store_avatar,
		// 	province: data.storeDom.province,
		// 	city: data.storeDom.city,
		// 	district: data.storeDom.district,
		// 	binding_id: data.dom.binding_id,
		// 	begin_time: allTime.value.begin_time,
		// 	end_time: allTime.value.end_time,
		// 	discount_amount: money.value,
		// }).then(result => {
		// 	// uni.navigateTo({
		// 	// 	url: `../confirm_order/confirm_order?time=${}`
		// 	// });
		// })

	}
	onLoad((option) => {
		data.options = JSON.parse(decodeURIComponent(option.item));
		data.userIfon = getApp().globalData.userIfon

		console.log(data.options, ' data.options')
		console.log(data.userIfon, ' data.userIfon')
		getReservation()
	})
</script>

<style lang="scss" scoped>
	.title {
		width: 100vw;
		height: 656rpx;
		background-image: url('../static/背景.png');
		background-size: 100% 100%;

		.box {
			display: flex;
			flex-direction: row;
			width: 100vw;
			height: auto;
			padding-top: 110rpx;

			.backIcon {
				position: absolute;
				left: 20rpx;
				z-index: 99;
				height: 40rpx;
				width: 40rpx;
			}

			.text {
				text-align: center;
				width: 100vw;
				height: 44rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				line-height: 38rpx;
			}
		}

	}

	.container {
		position: absolute;
		top: 206rpx;
		left: 32rpx;

		.topCard {
			transition: all 1s;
			position: relative;
			width: 686rpx;
			height: 238rpx;
			background: rgba(255, 255, 255, 0.9);
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(16, 199, 110, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #FFFFFF;

			.top {
				display: flex;
				margin-top: 24rpx;
				margin-left: 24rpx;

				.text1 {
					width: 78rpx;
					height: 42rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
					line-height: 35rpx;
				}

				.text2 {
					width: 106rpx;
					height: 38rpx;
					border-radius: 19rpx 19rpx 19rpx 19rpx;
					border: 1rpx solid #10C76E;
					margin-left: 12rpx;
					text-align: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #10C76E;
					line-height: 30rpx;
				}
			}

			.mid {
				display: flex;
				margin-left: 24rpx;
				margin-top: 22rpx;

				.image {
					height: 24rpx;
					width: 24rpx;
				}

				.text {
					margin-left: 4rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #333333;
					line-height: 28rpx;
				}
			}

			.groundText {
				position: absolute;
				left: 270rpx;
				top: 140rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
			}

			.unfoldButton {
				position: absolute;
				bottom: 26rpx;
				left: 330rpx;

				.image {
					height: 24rpx;
					width: 24rpx;
					transition: all 1s;
				}

				.trueImage {
					transform: rotate(180deg);
				}
			}
		}

		.buttonBox {
			display: grid;
			grid-template-columns: 352rpx 334rpx;
			margin-top: 32rpx;

			.button1 {
				width: 334rpx;
				height: 160rpx;
				background: linear-gradient(180deg, #FFFFE8 0%, #FFFFFF 100%);
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				position: relative;
				margin-bottom: 20rpx;

				.image {
					position: absolute;
					top: -22rpx;
					right: -18rpx;
					width: 354rpx;
					height: 203rpx;
				}

				.titleText {
					width: 120rpx;
					height: 42rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: #717100;
					line-height: 35rpx;
					position: absolute;
					top: 32rpx;
					left: 24rpx;
				}

				.text {
					width: 334rpx;
					height: 30rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #717100;
					line-height: 26rpx;
					position: absolute;
					top: 98rpx;
					left: 24rpx;
				}
			}
		}

		.heightCard {
			height: 600rpx;
		}
	}

	.background {
		height: 400rpx;
		width: 400rpx;
		position: absolute;
		top: 944rpx;
		left: 174rpx;
	}
</style>